<template>
    <main class="Site">
        <div v-for="(item,index) in site" :key="index" class="Site-content">
            <h3>{{item.name}}</h3>
            <span v-if="item.select == ''">{{item.nameselect[num].name}}</span>
            <span v-if="item.select != ''">{{item.select}}</span> 
            <span class="site-img"><img src="/src/assets/images/Site.png" alt=""></span>
        </div>
    </main>
</template>
<script>
export default {
    name:'DetailsSite',
    data:()=>({
        Site:[],
        num:0
    }),
    props:['site'],
    watch:{
        site(){
            this.Site=this.site;
           // console.log(this.Site,Object.prototype.toString.call(this.Site[0].nameselect));
        }
    }
}
</script>
<style scoped lang="less">
.Site{
    width: 23.4375rem;
    height:6.375rem;
    background: #fff;
    margin-top: .625rem;
    border-radius:.75rem ;
    .Site-content{
        padding: .9375rem .625rem;
        font-size: .875rem;
        display: flex;
        justify-content: space-around;
        .site-img{
            width: 1.25rem;
            height: 1.25rem;
            img{
                width: 1.25rem;
                height: 1.25rem; 
            }
        }
    }
}
</style>
